/**
 * Created by Ryan on 2017/10/26.
 */
'use strict';
import React, {PureComponent, PropTypes} from "react";
import {FlatList, Text, View, Animated, DeviceEventEmitter, StyleSheet} from "react-native";
import {SCREEN_WIDTH, SCREEN_HEIGHT} from '../config'
const TEXT_LIGTH_GRAY_COLOR: string = '#677b93';//字体灰色
const COLOR_MIDDLE_GREY: string = "#888888";
const FONT_SIZE_SUBTITLE: int = 12;


export default class JiuProList extends PureComponent {
    static propTypes: Object = {
        ...FlatList.propTypes,
        data: PropTypes.array.isRequired,
        itemHeight: PropTypes.number,
        initialNumToRender: PropTypes.number,
        renderEmptyData: PropTypes.func,
        onScroll: PropTypes.func,


    };
    static defaultProps: Object = {
        data: [],
        scrollEnabled: true,
        itemHeight: 40,
        initialNumToRender: 20,
        renderEmptyData: ()=> {
            return (
                <View
                    style={{height:SCREEN_HEIGHT*2/3,alignItems:'center',justifyContent:'center',width:SCREEN_WIDTH}}>
                    <Text
                        style={{fontSize:14,color:TEXT_LIGTH_GRAY_COLOR,marginTop:20}}>{"无数据"}</Text>
                </View>
            );
        }
    };

    constructor(props) {
        super(props);
        this.state = {
            ...FlatList.defaultProps,
            scrollEnabled: this.props.scrollEnabled,
            data: this.props.data,
            refreshing: false
        };
        this.rowRefs = [];
    }

    render(): ReactElement {
        var styleArr: Array = [{flex: 1}];
        if (this.props.style)styleArr.push(this.props.style);
        return (
            <FlatList
                ref={this.listRef.bind(this)}
                refreshing={this.state.refreshing}
                numColumns={1}
                onEndReachedThreshold={90}
                style={styleArr}
                data={this.state.data}
                onScroll={this._onScroll.bind(this)}
                initialNumToRender={this.props.initialNumToRender}
                getItemLayout={this._getItemLayout.bind(this)}
                renderItem={ this._renderItem.bind(this)}
                ListHeaderComponent={this._listHeaderComponent.bind(this)}
                onRefresh={this.props.onRefresh?this._onRefresh.bind(this):undefined}
                onEndReached={this.props.onEndReached?this._onEndReached.bind(this):undefined}
                scrollToIndex={this.scrollToIndex.bind(this)}
            />
        );
    }

    _onScroll(event) {
        this.props.onScroll ? this.props.onScroll(event) : undefined;
    }

    _renderItem(data) {
        return this.props.renderItem(data.item, data.index);
    }

    scrollToIndex(params: object) {
        return {animated: params.animated, index: params.index};
    }

    _listHeaderComponent() {
        if (this.state.data.length > 0) {
            return null;
        } else {
            return this.props.renderEmptyData();
        }
    }

    _getItemLayout(data: Array, index: number) {
        return {length: this.props.itemHeight, offset: this.props.itemHeight * index, index};
    }

    _onRefresh() {
        console.log("=====_onRefresh====");
        if (this.props.hasOwnProperty("onRefresh") && this.props.onRefresh != null) {
            // this.setRefreshing(true);
            this.props.onRefresh();
        }
    }

    _onEndReached(info) {
        console.log("=====info====", info);
        if (this.props.hasOwnProperty("onEndReached") && this.props.onEndReached != null) {
            // this.setRefreshing(true);
            this.props.onEndReached();
        }
    }


    listRef(list) {
        this.list = list;
    }

    setRefreshing(value) {
        this.setState({
            refreshing: true
        });
    }

    setProps(props: Object) {
        this.setState(props);
        // this.list.setNativeProps(props);
    }

    setData(data: Array) {
        var formatedData: Array = [];
        data.forEach((item, index)=> {
            item.key = String("index" + index);
            formatedData[index] = item;
        })
        this.setState({
            refreshing: false,
            data: formatedData
        });
    }

    getData(): Array {
        return this.state.data;
    }
}